﻿@page "/tests/utilities/sizing"

<Row>
    <Column ColumnSize="ColumnSize.IsFull">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Relative to the parent</CardTitle>
            </CardHeader>
            <CardBody Padding="Padding.Is0.FromBottom">
                <Paragraph Margin="Margin.Is0.FromBottom">
                    Width and height utilities includes support for <code>25%</code>, <code>50%</code>, <code>75%</code>, <code>100%</code>, and <code>auto</code> sizes.
                </Paragraph>
            </CardBody>
            <CardBody>
                <Div>
                    <Div Width="Width.Is25" Padding="Padding.Is3" Style="@widthItemStyle">Width 25%</Div>
                    <Div Width="Width.Is50" Padding="Padding.Is3" Style="@widthItemStyle">Width 50%</Div>
                    <Div Width="Width.Is75" Padding="Padding.Is3" Style="@widthItemStyle">Width 75%</Div>
                    <Div Width="Width.Is100" Padding="Padding.Is3" Style="@widthItemStyle">Width 100%</Div>
                    <Div Width="Width.Auto" Padding="Padding.Is3" Style="@widthItemStyle">Width auto</Div>
                </Div>
            </CardBody>
            <CardBody>
                <Div Style="@heightContainerStyle">
                    <Div Height="Height.Is25" Display="Display.InlineBlock" Style="@heightItemStyle">Height 25%</Div>
                    <Div Height="Height.Is50" Display="Display.InlineBlock" Style="@heightItemStyle">Height 50%</Div>
                    <Div Height="Height.Is75" Display="Display.InlineBlock" Style="@heightItemStyle">Height 75%</Div>
                    <Div Height="Height.Is100" Display="Display.InlineBlock" Style="@heightItemStyle">Height 100%</Div>
                    <Div Height="Height.Auto" Display="Display.InlineBlock" Style="@heightItemStyle">Height auto</Div>
                </Div>
            </CardBody>

            <CardBody Padding="Padding.Is0.FromBottom">
                <Paragraph Margin="Margin.Is0.FromBottom">
                    You can also use <code>Width="Width.Max"</code>(max-width: 100%;) and <code>Height="Height.Max"</code>(max-height: 100%;) utilities as needed.
                </Paragraph>
            </CardBody>
            <CardBody>
                <Div Style="@maxWidthContainerStyle">
                    <Div Width="Width.Max100" Style="@maxWidthItemStyle">Max-width 100%</Div>
                </Div>
            </CardBody>
            <CardBody>
                <Div Style="@maxHeightContainerStyle">
                    <Div Height="Height.Max100" Style="@maxHeightItemStyle">Max-height 100%</Div>
                </Div>
            </CardBody>
        </Card>
    </Column>
</Row>

<Row>
    <Column ColumnSize="ColumnSize.IsFull">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Relative to the viewport</CardTitle>
            </CardHeader>
            <CardBody Padding="Padding.Is0.FromBottom">
                <Paragraph Margin="Margin.Is0.FromBottom">
                    You can also use utilities to set the width and height relative to the viewport.
                </Paragraph>
            </CardBody>
            <CardBody>
                <ul>
                    <li>
                        <code>@("<Div Width=\"Width.Min\">Min-width 100vw</Div>")</code>
                    </li>
                    <li>
                        <code>@("<Div Height=\"Height.Min\">Min-height 100vh</Div>")</code>
                    </li>
                    <li>
                        <code>@("<Div Width=\"Width.Is100.Viewport\">Width 100vw</Div>")</code>
                    </li>
                    <li>
                        <code>@("<Div Height=\"Height.Is100.Viewport\">Height 100vh</Div>")</code>
                    </li>
                </ul>
            </CardBody>
        </Card>
    </Column>
</Row>

@code {
    const string ContainerBackgroundColor = "rgba(255,0,0,0.1)";
    const string ItemBackgroundColor = "rgba(0,0,255,.1)";

    string widthItemStyle = $"background-color: {ItemBackgroundColor};";

    string heightContainerStyle = $"background-color: {ContainerBackgroundColor};height: 100px;";
    string heightItemStyle = $"background-color: {ItemBackgroundColor};width:120px;";

    string maxWidthContainerStyle = $"background-color: {ContainerBackgroundColor};width: 100px;";
    string maxWidthItemStyle = $"background-color: {ItemBackgroundColor};height:100px;width:200px;";

    string maxHeightContainerStyle = $"background-color: {ContainerBackgroundColor};height: 100px;";
    string maxHeightItemStyle = $"background-color: {ItemBackgroundColor};width:100px;height:200px;";
}
